<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="referrer" content="no-referrer"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>友人帐-ChenZhen的客栈-CZ的java学习日记</title>
    <meta name=”Description” Content=”ChenZhen的个人博客，友人帐页面，博客友链显示”>
    <meta name=”Keywords” Content=”ChenZhen,博客,友人帐,友链″>
    <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>


<!--导航-->
<div  class="cz-navbar fixed">
    <div class="cz-pc-menu">
        <a href="index.html" th:href="@{/}" class="cz-navbar-brand text-decoration-none"><strong th:text="${author}">ChenZhen</strong></a>
        <div class="cz-navbar-links fs-6 fw-light" id="cz-navbar-links">
            <a href="index.html"    th:href="@{/}" class="cz-nav-link">首页</a>
            <a href="tags.html"     th:href="@{/tags}" class="cz-nav-link ">标签</a>
            <a href="archives.html" th:href="@{/archives}" class="cz-nav-link">归档</a>
            <a href="message.html"  th:href="@{/message}" class="cz-nav-link">留言板</a>
            <a href="friends.html"  th:href="@{/friends}" class="cz-nav-link cz-active-link">友链</a>
            <a href="https://www.travellings.cn/go.html" class="cz-nav-link">🚇开往</a>
            <a href="about.html"    th:href="@{/about}" class="cz-nav-link">关于我</a>
        </div>
        <a href="#" class="cz-navbar-brand" data-bs-toggle="modal" data-bs-target="#searchModal">
            <strong>搜索</strong>
        </a>
        <button class="cz-menu-toggle-btn">菜单</button>

    </div>
    <div class="cz-mobile-menu fw-light fs-6">
        <a href="index.html"    th:href="@{/}" class="cz-nav-link ">首页</a>
        <a href="tags.html"     th:href="@{/tags}" class="cz-nav-link ">标签</a>
        <a href="archives.html" th:href="@{/archives}" class="cz-nav-link">归档</a>
        <a href="message.html"  th:href="@{/message}" class="cz-nav-link">留言板</a>
        <a href="friends.html"  th:href="@{/friends}" class="cz-nav-link cz-active-link">友链</a>
        <a href="https://www.travellings.cn/go.html" class="cz-nav-link">🚇开往</a>
        <a href="about.html"    th:href="@{/about}" class="cz-nav-link">关于我</a>
    </div>
</div>


<!-- 搜索框 -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content p-2 ">
            <div class="modal-body ">
                <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="text-center fs-5 mb-3">搜　索</div>
                <div class="input-group mb-4">
                  <span class="input-group-text" id="basic-addon1">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                      </svg>
                  </span>
                    <input id="keywordInput" type="text" class="form-control" placeholder="输入关键词" aria-describedby="basic-addon1">
                </div>

                <div class="mb-2">搜索结果</div>
                <!-- 搜索结果展示区域 -->
                <div id="searchResults" class="list-group">
                </div>
            </div>

        </div>
    </div>
</div>
<div  alt="" class="" style="height: 15vh"></div>



<!--中间内容-->
<div class="container " style="margin-top: 0em;max-width: 1200px">
    <div class="fs-5"><strong><span class="cz-text-green ">不妨</span> , 留下你的痕迹🎞</strong></div>
    <p class="cz-navbar-brand fw-bold cz-text-shadow-3" style="font-size:4.0rem;"><strong >让我们，交个<span class="cz-text-green">朋友</span></strong></p>

    <div class="row mb-5">
        <div class="col-5 fw-light">
            <h4 class="mt-3 mb-3 fw-bold cz-text-shadow-3">申请友链网站要求</h4>
            <p >🚫 无色情内容，无政治敏感内容，网站要能长期正常访问</p>
            <p >📅 一个月内有新文章更新</p>
            <p >🤝 原创博客、技术博客、游记博客优先</p>
            <p class="mb-5">💖 先友后链，需要交换友链，先把本站添加到你的网站中，然后根据下面的格式，给我发email或在留言板给我留言~</p>

            <h4 class="mb-3 fw-bold cz-text-shadow-3">👋申请格式</h4>
            <p>
                博客标题：<span id="blogTitle">ChenZhen的客栈</span>
                <svg type="button" onclick="copyContent('blogTitle')" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" ><path fill="currentColor" fill-rule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z" clip-rule="evenodd"></path></svg>
            </p>

            <p>
                博客地址：<span id="blogAddress">https://www.chenzhen.space/</span>
                <svg type="button" onclick="copyContent('blogAddress')" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z" clip-rule="evenodd"></path></svg>
            </p>
            <p>
                图片地址：<span id="blogPicture">https://www.chenzhen.space/images/me.jpg</span>
                <svg type="button" onclick="copyContent('blogPicture')" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z" clip-rule="evenodd"></path></svg>
            </p>

            <p class="mb-5">
                博客描述：<span id="blogDescription">个人博客，分享技术文章、生活文章、自建ChatGPT提示库、AI应用大全</span>
                <svg type="button" onclick="copyContent('blogDescription')" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" ><path fill="currentColor" fill-rule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z" clip-rule="evenodd"></path></svg>
            </p>
            <h4 class="fw-bold mb-3 cz-text-shadow-3">❌无法访问或单方面取消</h4>
            不定时排查，长期不更新文章、无法访问或单方面取消，将会移除链接，恕不告知😵


        </div>
        <div class="col-7">
            <label class="fw-bold mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-vector-pen" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M10.646.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-1.902 1.902-.829 3.313a1.5 1.5 0 0 1-1.024 1.073L1.254 14.746 4.358 4.4A1.5 1.5 0 0 1 5.43 3.377l3.313-.828L10.646.646zm-1.8 2.908-3.173.793a.5.5 0 0 0-.358.342l-2.57 8.565 8.567-2.57a.5.5 0 0 0 .34-.357l.794-3.174-3.6-3.6z"/>
                    <path fill-rule="evenodd" d="M2.832 13.228 8 9a1 1 0 1 0-1-1l-4.228 5.168-.026.086.086-.026z"/>
                </svg>
                你的博客名称<span style="color: red"> *</span>
            </label>
            <input name="blogName" type="text" class="cz-friendlink-input mb-4" >

            <label class="fw-bold mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
                    <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
                    <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
                </svg>
                你的博客地址<span style="color: red"> *</span>
            </label>
            <input name="blogAddress" type="text" class="cz-friendlink-input mb-4" >

            <label class="fw-bold mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-square" viewBox="0 0 16 16">
                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                    <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1v-1c0-1-1-4-6-4s-6 3-6 4v1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12z"/>
                </svg>
                你的博客头像<span style="color: red"> *</span>
            </label>
            <input name="pictureAddress" type="text" class="cz-friendlink-input mb-4" >

            <label class="fw-bold mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-text" viewBox="0 0 16 16">
                    <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                    <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
                </svg>
                你的博客描述<span style="color: red"> *</span>
            </label>
            <textarea name="blogDescription" type="text" class="cz-friendlink-textarea mb-4" ></textarea>

            <label class="fw-bold mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-at" viewBox="0 0 16 16">
                    <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
                    <path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648Zm-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/>
                </svg>
                你的邮箱地址<span>（审核通过之后会提醒哦）</span>
            </label>
            <input name="email" type="email" class="cz-friendlink-input mb-4" >


            <button type="submit" class="cz-friendlink-button" onclick="applyFriend()">申请友链</button>

        </div>

    </div>

</div>

<div class="container-sm">
    <div class="row mb-4">

        <div class="cz-friend-list row mt-3">
            <div class="col-lg-3 col-md-4 col-sm-6 mb-4 " th:each="friendlink : ${friendlinks}">
                <a href="#" target="_blank" th:href="@{${friendlink.blogAddress}}" class="cz-friend shadow">
                    <div class="cz-friendlink-card ">
                        <div class="d-flex align-items-center mb-3">
                            <div class="cz-friend-avatar">
                                <img src="../static/images/me.jpg" th:src="@{${friendlink.pictureAddress}}" alt="">
                            </div>
                            <strong class="fs-5 cz-text-shadow-4" th:text="${friendlink.blogName}">
                                ChenZhen的博客
                            </strong>
                        </div>
                        <div class="fw-light" th:text="${friendlink.blogDescription}">个人博客，分享技术文章、自建ChatGPT提示库、在线聊天网页</div>
<!--                        右上角-->
                        <div class=" position-absolute top-0 end-0 p-2">
                            <svg th:if="${friendlink.netStatus == 0}" width="20" height="20" xmlns="http://www.w3.org/2000/svg" tabindex="0" aria-labelledby="uptime-tooltip"><rect width="20" height="20" fill="#10a37f"></rect></svg>
                            <svg th:if="${friendlink.netStatus == 1}" width="20" height="20" xmlns="http://www.w3.org/2000/svg" tabindex="0" aria-labelledby="uptime-tooltip"><rect width="20" height="20" fill="#e0ab3c"></rect></svg>
                            <svg th:if="${friendlink.netStatus == 2 || friendlink.netStatus == 3}" width="20" height="20" xmlns="http://www.w3.org/2000/svg" tabindex="0" aria-labelledby="uptime-tooltip"><rect width="20" height="20" fill="#ef4146"></rect></svg>
                        </div>
                    </div>
                </a>
            </div>


        </div>
    </div>
</div>

<!--底部栏-->
<footer class="border-top p-3 bg-white text-muted small">
    <div class="container pb-5 ">
        <div class=" d-flex align-items-center justify-content-between">
            <div>
                <span class="cz-navbar-brand mr-2"><strong th:text="${author}">ChenZhen</strong></span>我的博客已营业：<span id="htmer_time">1年105天8时13分28秒</span>
            </div>
            <div>
                <a target="_blank" class="text-secondary fw-bold" href="#">粤ICP备2022122083号-1</a>
            </div>
        </div>
    </div>
</footer>



<script src="../static/lib/bootstrap.bundle.min.js" th:src="@{/lib/bootstrap.bundle.min.js}"></script>
<script src="../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<script src="../static/lib/clickEffect.js" th:src="@{/lib/clickEffect.js}"></script>


<script>



    // 移动设备导航栏样式切换
    // 获取菜单切换按钮和移动设备菜单列表的引用
    const menuToggleBtn = document.querySelector('.cz-menu-toggle-btn');
    const mobileMenu = document.querySelector('.cz-mobile-menu');
    // 点击菜单切换按钮时的事件处理函数
    menuToggleBtn.addEventListener('click', () => {
        // 切换移动设备菜单列表的显示状态
        mobileMenu.classList.toggle('show');
    });
    //复制内容
    function copyContent(elementId) {
        // 获取要复制的元素
        const text = document.getElementById(elementId).textContent;
        // 创建一个临时的文本框
        const tempInput = document.createElement('input');
        // 将文本内容赋值给临时文本框
        tempInput.value = text;
        // 将临时文本框添加到页面中
        document.body.appendChild(tempInput);
        // 选中临时文本框中的内容
        tempInput.select();
        // 执行复制操作
        document.execCommand('copy');
        // 删除临时文本框
        document.body.removeChild(tempInput);


    }
    //申请友链
    function applyFriend () {
        let blogName = $("input[name='blogName']").val();
        let blogAddress = $("input[name='blogAddress']").val();
        let pictureAddress = $("input[name='pictureAddress']").val();
        let blogDescription = $("textarea[name='blogDescription']").val();
        let email = $("input[name='email']").val();


        //校验
        if (!blogName.trim()) {
            alert("请输入博客名称");
            return;
        }
        if (!blogAddress.trim()) {
            alert("请输入博客地址");
            return;
        }
        if (!pictureAddress.trim()) {
            alert("请输入图片地址");
            return;
        }
        if (!blogDescription.trim()) {
            alert("请输入博客描述");
            return;
        }
        let requestData = {
            blogName: blogName,
            blogAddress: blogAddress,
            pictureAddress: pictureAddress,
            blogDescription: blogDescription,
            email: email
        };
        // 发送 AJAX 请求
        $.ajax({
            type: "POST",
            url: "/friends/apply-friendlink",  // Replace with the actual endpoint URL
            data: requestData,
            success: function(response) {
                if (response.code === 20000){
                    alert("申请成功");
                }else{
                    alert(response.message);
                }
            },
            error: function(error) {
                alert("申请失败");
            }
        });
    }



    // 运行时间统计
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }
    function setTime() {
        /*此处为网站的创建时间*/
        var create_time = Math.round(new Date(Date.UTC(2022, 8, 21, 15, 15, 15)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    setInterval(setTime, 1000);



</script>
</body>
</html>
